<template>
  <div>
    <!-- 实时数据概况 -->
    <el-card>
      <LiveOverview :tabs="realTimeData" />
    </el-card>

    <!-- 结算状态 start -->
    <div class="settle-status flex align-center justify-between mt-20">
      <div class="left flex">
        <p>
          <span>结算状态：</span>
          <span :style="{ color: settleStatusColor }">{{ settleStatus }}</span>
          <el-popover
            placement="bottom"
            title="结算记录"
            width="300"
            trigger="click"
            class="ml-10"
            v-if="records.status === 2"
          >
            <div>
              <TitleLine title="结算备注" />
              <p class="pl-15">{{ records && records.remark }}</p>
            </div>
            <div>
              <TitleLine title="操作人信息" />
              <p class="pl-15">操作时间：{{ records && records.auditTime }}</p>
              <p class="pl-15">操作员：{{ records && records.auditUser }}</p>
            </div>
            <span class="text-link-blue" slot="reference">查看记录</span>
          </el-popover>
        </p>
        <p class="ml-15">
          <span style="font-weight: bold">账单周期：</span>
          <span>{{ records.startTime }}至{{ records.endTime }}</span>
        </p>
      </div>

      <div class="right">
        <el-button type="primary" v-if="records.status === 1" @click="dialogVisible = true"
          >去结算</el-button
        >
        <el-button type="primary" @click="exportFile('part')">导出勾选</el-button>
        <el-button type="primary" @click="exportFile('all')">导出全部</el-button>
      </div>
    </div>
    <!-- 结算状态 end -->

    <el-card class="mt-20">
      <Tabs :tabs="tabs" :currentKey="currentTab" @tab-click="tabClick" />
      <!-- 数据表格 -->
      <IntegralExpenditureTable ref="integralExpenditureTable" />
    </el-card>
    <!-- 审核弹窗 -->
    <BillDialog v-model="dialogVisible" :id="id" @update="handleUpdate" />
  </div>
</template>

<script>
import { useFilterSingleStatistics } from '@/hooks'
import BillDialog from '@/views/integral/integral-settlement/components/BillDialog'
import IntegralExpenditureTable from '@/views/integral/integral-settlement/components/integralExpenditureTable'
export default {
  name: 'integralExpenditureBill',
  components: {
    BillDialog,
    IntegralExpenditureTable
  },
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      currentTab: 'integral',
      platform: 2,
      tabs: [{ label: '好物平台', num: '', key: 'integral', value: 2 }],
      // 控制结算弹窗显示
      dialogVisible: false,
      realTimeData: [
        {
          isShow: true,
          baseData: {
            key: 'totalOutlayAmount',
            label: '累计兑换积分',
            value: ''
          },
          prompt: {
            showLine: true,
            color: '#409eff',
            text: '客户在平台兑换好物积分'
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'exchangeOrderNum',
            label: '累计兑换订单数',
            value: ''
          },
          prompt: {
            showLine: true,
            color: '#409eff',
            text: '客户在平台兑换订单数'
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'platformEtpNum',
            label: '接入平台企业主数',
            value: ''
          },
          prompt: {
            showLine: true,
            color: '#409eff',
            text: '————————'
          }
        }
      ],
      records: {
        auditTime: '',
        auditUser: '',
        createdTime: '',
        endTime: '',
        exchangeOrderAmount: 0,
        id: 0,
        incomeAmount: 0,
        incomePlatformNum: 0,
        month: '',
        remark: '',
        startTime: '',
        status: 0,
        updatedTime: ''
      }
    }
  },
  computed: {
    // 结算状态
    settleStatus() {
      const status = {
        1: '待审核',
        2: '已结算'
      }
      return status[this.records.status]
    },
    // 结算状态文本颜色
    settleStatusColor() {
      const colors = {
        1: '#fc4560',
        2: '#409eff'
      }
      return colors[this.records.status]
    }
  },
  created() {
    this.handleSettlementBillStatistics()
    this.handleSettlementBillDetail()
  },
  methods: {
    //完成结算更新
    handleUpdate() {
      this.handleSettlementBillDetail()
    },
    async handleSettlementBillDetail() {
      const { data } = await this.$http.integral.integralSettlementApi.getSettlementBillDetail(
        this.id
      )
      this.records = data
      this.handleIntegralList()
      await this.handleIntegralTabs()
    },
    async handleSettlementBillStatistics() {
      const { data } = await this.$http.integral.integralSettlementApi.getSettlementBillStatistics(
        this.id
      )
      this.realTimeData = useFilterSingleStatistics(this.realTimeData, data)
    },
    //获取tab值
    tabClick({ key, value }) {
      this.currentTab = key
      this.platform = value
      this.handleIntegralList()
    },
    //获取参数
    handleParams() {
      let params = {}
      if (this.records.startTime) params.startTime = this.records.startTime
      if (this.records.endTime) params.endTime = this.records.endTime
      if (this.platform) params.platform = Number(this.platform)
      params.transactionType = 1
      return params
    },
    //获取积分列表
    handleIntegralList() {
      const params = this.handleParams()
      this.$nextTick(() => {
        this.$refs.integralExpenditureTable.handleIntegralList(params)
      })
    },
    //获取积分列表tab统计
    async handleIntegralTabs() {
      const params = this.handleParams()
      delete params.platform
      const {
        data: { outs }
      } = await this.$http.integral.integralSettlementApi.getIntegralTabs(params)
      // 统计
      this.tabs = this.tabs.map(item => {
        outs.forEach(v => {
          if (v.platform === item.value) {
            item.num = v.tabNum || 0
          }
        })
        return item
      })
    },
    exportFile(type) {
      const params = this.handleParams()
      this.$nextTick(() => {
        this.$refs.integralExpenditureTable.exportFile(type, params)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.settle-status {
  padding: 10px 5px;
  background-color: #e2f1f9;
}
</style>
